<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>{$loan.title}</title>
		<link rel="stylesheet" href="/static/home/css/product.css" />
		<link rel="stylesheet" href="/static/home/css/style.css" />
		<link rel="stylesheet" href="/static/home/css/swiper.min.css" />
		<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no">
		<script src="/static/home/js/echarts.min.js"></script>
		<style>
			.banner-xyk-box{margin: 0 5%;}
			.logo-xyk{width: 100%;border-radius: 5px;}
		</style>
	</head>
	<body style="background-color:#f1f4f8;padding-bottom: 65px">
		<!--<div class="record-head-box" style="margin-top: 0;border-bottom: 15px solid #f1f4f8">
			<span class="active"><a href="/product/loan/{$loan.id}">产品介绍</a> <span></span></span>
<!-- <span><a href="/product/jiesuan/{$loan.id}">奖金结算</a><span></span></span>
			<span><a href="/product/msg/{$loan.id}">产品评价</a><span></span></span>
		</div>-->
		<div class="product-banner-box">
									<div class="banner-top-box">
				<!-- 产品信息图  当产品不是信用卡是不显示  -->
				<div class="banner-lf-box">
					<img src="{$loan.logo}"/>
					<span>{$loan.title}</span>
				</div>
				<div class="banner-center-box">
					<span class="mon-xt">{$loan.max_money}</span>
					<span>最高额度</span>
				</div>
				<div class="banner-rg-box">
					<span>· 期限范围：{$loan.month_term_star}-{$loan.month_term_end}日</span>
					<span>·日利率：{$loan.annual_interest_rate}%</span>
					<span>· 通过率：{$loan.success}%</span>
				</div>
			</div>
						<div class="banner-bottom-box">
				<span class='product-name'>{$loan.title}</span>
				<span class='product-people'>{$loan.num}人</span>
				<span class="product-fcxt">已成功放款</span>
			</div>
		</div>
				<!--申请条件-->
		<div class="pd-mdl-bx">
			<div class="pd-pb-title">
				<h2>申请条件</h2>
			</div>
			<div class="pd-sqzy-st"><?php echo htmlspecialchars_decode($loan['content']);?></div>
		</div>
				<!--商品评价  -->
			<!--<div class="dk-zs-box">
			<span class="tlchlider-xtr">商品评价</span>
			{foreach $msg as $v}
			<div class="estimate-box">
				<img src="{$v.headpic}"/>
				<div class="estimate-ms-box">
					<span>{$v.nickname}</span>
					<span class="estimate-datext">{$v.add_time|date=('Y-m-d H:i:s')}</span>
					<span>{$v.content}</span>
				</div>
			</div>
			{/foreach}
			<a href="/product/msg/{$loan.id}" class="estimate-xtall">共有{$count}条评论</a>
		</div>-->
		<!--同类产品-->
		<div class="sprmt-product-box">
			<div class="prdmt-tle-box">
				<span class="rmdkls">同类推荐</span>
			</div>
			<div class="swiper-container">
				<div class="swiper-wrapper">
				{foreach $sui as $v}
					<div class="swiper-slide">
						<div class="list-li-box">
							<a href="/product/loan/{$v.id}">
								<img src="{$v.logo}" alt="" />
								<p>{$v.title}</p>
							</a>
						</div>
					</div>
				{/foreach}
				</div>
			</div>
			<div class="service-agency-box">
				<div class="service-agency-box">
				<div class="btn-service"><a href="/loan/url/{$loan.id}/{$vid}">我要申请</a>
				</div>
				<div class="btn-agency">
				{if($userinfo.lev_id < 2)}
				<a href="javascript:;" id="daili" ids={$loan.id}>代理本产品</a>
				{else}
					<a href="/loan/tgqr/{$loan.id}">代理本产品</a>
				{/if}
				</div>
			</div>
			</div>
		</div>
		<script src="/static/home/js/jquery-1.12.4.min.js"></script>
		<script src="/static/home/js/swiper.min.js"></script>
		<script src="/static/home/js/vue.js"></script>
		<script>
			$('#daili').click(function(){
				var id = $('#daili').attr('ids');
				$.post("{:url('checkUser')}",{id:id},function(data){
					if (data.code ==1) {
						alert(data.msg)
					}else{
						location.replace("/loan/tgqr/{$loan.id}");
					}
				})
			})
		</script>
		<script>
			var swiper = new Swiper('.swiper-container', {
		        pagination: '.swiper-pagination',
		        slidesPerView: 2.4,
		        paginationClickable: true,
		        spaceBetween: 10,
		        freeMode: true
		    });
			$('body').ready(function() {
				$(".swiper-wrapper").height(195);
				$(".swiper-slide").height(195);
			})
//			$(".swiper-wrapper").css("paddingLeft":"0")
		</script>
<script type="text/javascript">
			var vm = new Vue({
				el: '#v',
				data: {
					//状态
					status: false,
					//借款金额
					money: {$loan['max_money']},
					//最大期数
					max_month: 24,
					//最小期数
					min_month: 6,
					//月利率
					month_money: {$loan.annual_interest_rate},
					//月还款:
					month_hk: 0,
					//总利息:
					lxTotal: 0,
					//总还款金额:
					hkTotal: 0
				},
				methods: {
					begin: function() {
						var month = $("#select").val();
						vm.status = false;
						$.post("{:url('loan/ceshi')}",{money:this.money,month_money:this.month_money,month:month},function(data){
							if(data) {
								vm.month_hk = data.emTotal;
								vm.lxTotal = data.lxTotal;
								vm.hkTotal = data.hkTotal;
							}
							setTimeout(function(){
								vm.status = true;
								vm.echarts();

							},1000);

						},'json');
					},
					echarts: function() {
						option = {
							tooltip: {
								show: true,
								trigger: 'item',
								formatter: function(params, ticket, callback) {
									var num = vm.hkTotal;
									var str = '<div style="text-align: center;margin-left: 0px;" id="toolTipBox"><p style="font-size:16px;font-weight:600;margin:0px;color: #555555">' + num + '</p><p style="font-size:12px;margin:0px;color: #8e8c8c;">总还款金额(元)</p></div>'
									return str;
								},
								position: function(point, params, dom, rect, size) {
									//size参数可以拿到提示框的outerWidth和outerheight，dom参数可以拿到提示框div节点。
									//console.log(dom)可以看到，提示框是用position定位
									var marginW = Math.ceil(size.contentSize[0] / 2) - 5;
									var marginH = Math.ceil(size.contentSize[1] / 2);
									dom.style.marginLeft = '-' + marginW + 'px';
									dom.style.marginTop = '-' + 16 + 'px';
									dom.style.lineHeight = "16px";
									dom.style.padding = 0;
									return ['50%', '46%'];
								},
								alwaysShowContent: true,
								backgroundColor: 'tran', //设置提示框的背景色
								textStyle: {
									color: '#333'
								}
							},
						//	legend: {
						//		orient: 'horizontal',
						//		x: 'center',
						//		y: 'top',
						//		data: ['本金', '利息'],
						//
						//	},
							series: [{
								type: 'pie',
								radius: ['70%', '90%'],
								avoidLabelOverlap: false,
								hoverAnimation: false, //关闭 hover 在扇区上的放大动画效果。
								cursor: 'default', //鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。
								silent: true, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
								color: ['#FE6561', '#4e90e6'],
								center: ['50%', '46%'],
								label: {
									normal: {
										show: false,
										position: 'default'
									},
									emphasis: {
										show: false
									}
								},
								labelLine: {
									normal: {
										show: false
									}
								},
								data: [{
										//后台赋给value,目前写死
										value: vm.lxTotal,
										name: '利息'
									},
									{
										//后台赋值本金,目前写死
										value: vm.money,
										name: '本金'
									},
								]
							}]
						};
						var myChart = echarts.init(document.getElementById('main'));
						myChart.setOption(option);
						// 显示 tooltip
						myChart.dispatchAction({
							type: 'showTip',
							seriesIndex: 0,
							dataIndex: 0
						});
					}
				}
			});
			vm.begin();
		</script>

	</body>
</html>